<script setup>
	import {
		ref
	} from 'vue'
	import {
		useMemberStore
	} from '@/stores'
	// 获取屏幕边界到安全区域距离
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	// 获取右侧胶囊位置信息
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()

	// 获取会员信息
	const memberStore = useMemberStore()
	// 快捷入口
	const entry = ref([{
			name: '个人信息',
			url: `../../static/images/my/entry1.png`,
			path: '/pages/userInfo/index',
		},
		{
			name: '我的申请',
			url: `../../static/images/my/application.png`,
			path: '/pages/my-application/my-application',
		},
		{
			name: '我的活动',
			url: `../../static/images/my/active.png`,
			path: '/pages/my-active/my-active',
		},
	])

	const columnEntry = ref([{
			name: '问题反馈',
			url: `../../static/images/my/icon3.png`,
			path: '/pages/feedback/feedback',
		},
		{
			name: '关于我们',
			url: `../../static/images/my/icon7.png`,
			path: '/pages/about/about',
		},
	])

	const columnEntry2 = ref([{
			name: '问题反馈',
			url: `../../static/images/my/icon3.png`,
			path: '/pages/feedback/feedback',
		},
		{
			name: '我的审批',
			url: `../../static/images/my/icon4.png`,
			path: '/pages/my-approval/my-approval',
		},
		{
			name: '关于我们',
			url: `../../static/images/my/icon7.png`,
			path: '/pages/about/about',
		},
	])

	const jumpPage = (item) => {
		if (!item.path) return
		uni.navigateTo({
			url: item.path
		})
	}
</script>

<template>
	<view class="viewport">
		<!-- 头部 -->
		<view class="header" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="title" :style="{ height: menuButtonInfo.height + 'px' }">节日大道</view>
			<!-- 个人资料 -->
			<view class="profile">
				<!-- 情况1：已登录 -->
				<view v-if="memberStore.profile">
					<navigator url="/pages/userInfo/index" hover-class="none" class="overview">
						<image class="avatar" :src="memberStore.profile.avatar" mode="aspectFill"></image>
						<view class="meta">
							<view class="nickname">
								{{ memberStore.profile.nickName }}
							</view>
							<view class="user-info">
								<image src="../../static/images/my/badge.png" mode="aspectFill" />
								<text>商圈负责人</text>
							</view>
						</view>
					</navigator>
				</view>
				<!-- 情况2：未登录 -->
				<view class="overview" v-else>
					<navigator url="/pages/login/index" hover-class="none">
						<image class="avatar gray" mode="aspectFill"
							src="https://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png">
						</image>
					</navigator>
					<view class="meta">
						<navigator url="/pages/login/index" hover-class="none" class="nickname">
							未登录
						</navigator>
						<view class="extra">
							<text class="tips">点击登录账号</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<view class="card-list">
				<navigator class="card-item" hover-class="none" v-for="(item, index) in entry" :key="index"
					:url="item.path">
					<view class="icon">
						<image :src="item.url" mode="aspectFill" />
					</view>
					<view class="title">{{ item.name }}</view>
				</navigator>
			</view>

			<!-- 消费者账号 -->
			<view class="column-list" v-if="memberStore?.profile?.roleGroup === '普通角色'">
				<view class="column-item" v-for="(item, index) in columnEntry" :key="index" @tap="jumpPage(item)">
					<view class="item-left">
						<image :src="item.url" mode="aspectFill" />
						<text>{{ item.name }}</text>
					</view>
					<view class="item-right">
						<image src="../../static/images/my/right-icon.png" mode="aspectFill" />
					</view>
				</view>
			</view>

			<!-- 审批者账号 -->
			<view class="column-list" v-else>
				<view class="column-item" v-for="(item, index) in columnEntry2" :key="index" @tap="jumpPage(item)">
					<view class="item-left">
						<image :src="item.url" mode="aspectFill" />
						<text>{{ item.name }}</text>
					</view>
					<view class="item-right">
						<image src="../../static/images/my/right-icon.png" mode="aspectFill" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.viewport {
		height: 100vh;
		background: #ffffff;
		.header {
			width: 100%;
			height: 410rpx;
			background: linear-gradient(180deg, #ea5506 0%, #ffffff 100%);

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	/* 用户信息 */
	.profile {
		margin-top: 80rpx;
		position: relative;

		.overview {
			display: flex;
			height: 120rpx;
			padding: 0 36rpx;
			color: #fff;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #eee;
		}

		.gray {
			filter: grayscale(100%);
		}

		.meta {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			margin-left: 20rpx;

			.user-info {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 20rpx;
				border-radius: 46rpx;
				background: rgba(255, 255, 255, 0.5);

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}

				text {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(242, 169, 34, 1);
				}
			}
		}

		.nickname {
			font-size: 36rpx;
			font-weight: 900;
			color: #000000;
			max-width: 500rpx;
			margin-bottom: 16rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.extra {
			display: flex;
			font-size: 20rpx;
		}

		.tips {
			font-size: 22rpx;
		}

		.update {
			padding: 3rpx 10rpx 1rpx;
			color: rgba(255, 255, 255, 0.8);
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			margin-right: 10rpx;
			border-radius: 30rpx;
		}

		.settings {
			position: absolute;
			bottom: 0;
			right: 40rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	/* 内容区域 */
	.content {
		padding: 0 40rpx;

		.card-list {
			margin-bottom: 36rpx;
			width: 100%;
			height: 220rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 8.5px 25.5px rgba(245, 237, 233, 1);
			display: flex;
			align-items: center;

			.card-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					font-size: 28rpx;
					color: rgba(70, 74, 87, 1);
				}
			}
		}

		.column-list {
			width: 100%;
			border-radius: 22rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 8.5px 25.5px rgba(245, 237, 233, 1);
			padding: 16rpx 40rpx;

			.column-item {
				height: 100rpx;
				border-bottom: 1px solid rgba(240, 245, 247, 1);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-left {
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx;
					}

					text {
						font-size: 28rpx;
						color: rgba(54, 59, 71, 1);
					}
				}

				.item-right {
					image {
						width: 12rpx;
						height: 24rpx;
					}
				}
			}

			.column-item:last-child {
				border: none;
			}
		}
	}
</style>